<template>
  <!--预警列表-->
  <div class="inspection">
    <section>
      <mu-container ref="container" class="demo-loadmore-content">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <mu-list>
            <div class="card" v-for="(i,index) in datas" :key="index" @click="details(i.problemId)">
              <section class="tit">
                <span class="tag">超期{{i.overTimeDays || '---'}}天</span><!--超期天数-->
                <span class="tag-question">{{i.status | status}}</span><!--整改类型-->
              </section>
              <div class="t-con">
                <div class="outline">
                  <span class="outline_name">检查部位：</span>
                  <span class="outline_con">{{ i.checkParts || '---'}}</span>
                </div>
                <div class="outline">
                  <span class="outline_name">问题描述：</span>
                  <span class="outline_con">{{i.problemDescription || '---'}}</span>
                </div>
                <div class="outline">
                  <span class="outline_name">整改期限：</span>
                  <span class="outline_con">{{i.endTime || '---'}}</span>
                </div>
                <div class="outline">
                  <span class="outline_name">检查人：</span>
                  <span class="outline_con">{{ i.checkUserName || '---'}}</span>
                </div>
              </div>
            </div>
          </mu-list>
        </mu-load-more>
      </mu-container>
      <NoData v-if="!datas.length"/>
    </section>

  </div>
</template>

<script>
  export default {
    filters:{
      status (val) {
        if (val == 0) {
          return '整改中'
        }else if(val == 1){
          return '待复查'
        }else if (val == 2) {
          return '已整改'
        }else {
          return '---'
        }
      }
    },
    props:{
      datas:{
        type:Array,
      }
    },
    name: "inspection",
    data () {
      return {
        refreshing: false,
        loading: false,
      }
    },
    mounted () {},
    methods: {

      refresh () {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.$emit('getData')
        }, 2000)
      },
      load () {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.$emit('getData')
        }, 2000)
      },



      //跳转查看详情
      details (id) {
        this.$router.push(
          {
            path: '/accountDetaildf',
            query: {
              info: id
            }
          });
      },



    }
  }
</script>

<style scoped lang="scss">
  .inspection{
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    section {
      flex: 1;
      overflow: auto;
      .card {
        border-bottom: 0.01rem solid #EFEFEF;
        background-color: #FFFFFF;
        margin: 0.12rem;
        box-shadow: 0px 2px 8px 0px rgba(182, 182, 182, 0.4);
        .tit {
          display: flex;
          justify-content: space-between !important;
          padding:0.12rem;
          border-bottom:0.01rem dashed #E0E0E0;
          .tag {
            width: fit-content;
            height: fit-content;
            padding: 0.06rem;
            background-color: white;
            border-radius: 0.02rem;
            font-size: 0.12rem;
            line-height: 0.12rem;
            color: #0095FF;
          }
          .tag-question {
            font-size: 0.13rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 149, 255, 1);
            line-height: 0.18rem;
          }
          .active0 {
            color: #389D2B;
          }
          .active1 {
            color: #0095FF;
          }
          .active2 {
            color: #FF8A1B;
          }
        }
        .t-con{
          padding: 0.12rem;
          .outline {
            padding: 0.05rem 0;
            .outline_name {
              font-size: 0.15rem;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(140, 140, 140, 1);
              line-height: 0.21rem;
            }
            .outline_con {
              font-size: 0.15rem;
              font-family: PingFangSC-Medium, PingFang SC;
              font-weight: 500;
              color: rgba(61, 61, 61, 1);
              line-height: 0.21rem;
            }
          }
        }

      }
    }
  }
</style>
